//插件
//找到图片
let image = $('#image')
//剪裁配置项
let option = { 
  //设置剪裁比例
  aspectRatio:1,
  //指定预览区
  preview: '.img-preview'
}
//调用cropper方法 实现初始的效果
image.cropper(option)


// 点击 上传 触发文件域的单击事件 
$('button:contains("上传")').on('click',function(){ 
  $('#file').trigger('click')
})


//选择图片 更换剪裁区的图片 
$('#file').on('change',function(){ 
  //获取图片的url地址
  if (this.files.length > 0) { 
    let fileObj = this.files[0]

    let url = URL.createObjectURL(fileObj)
    image.cropper('replace',url)
  }
})


// 完成更换
// 点击 确定 按钮  裁剪图片 转换成base64格式  提交给接口
$('button:contains("确定")').on('click',function(){ 
  //裁剪图片
  let canvas = image.cropper('getCroppedCanvas', { width: 30, height: 30 });
   // canvas有一套内置的API方法，属于JS原生语法（只有指定jpeg格式，才能指定图片质量这个参数）
   let base64 = canvas.toDataURL('image/jpeg', 0.3);

   axios.post('/my/user/avatar',`avatar=${encodeURIComponent(base64)}`).then(res => { 
     let { status,message} = res.data
     if(status === 0) { 
       layer.msg(message)
       //更换了头像 更换父页面 
       window.parent.getUserInfo()
     }
   })
})